//页面中所有的数据
var data = [
  {
    id: 1,
    name: "医生1",
    tel: "18811112345",
    hospital: "华西医院",
    department: "消化科",
    title: "护师",
    joinTime: "2022-08-23 21：00：00",
  },
  {
    id: 2,
    name: "医生2",
    tel: "18811112345",
    hospital: "华西医院",
    department: "儿科",
    title: "护师",
    joinTime: "2022-08-23 21：00：00",
  },
  {
    id: 3,
    name: "医生3",
    tel: "18811112345",
    hospital: "华西医院",
    department: "消化科",
    title: "护师",
    joinTime: "2022-08-23 21：00：00",
  },
  {
    id: 4,
    name: "医生4",
    tel: "18811112345",
    hospital: "华西医院",
    department: "儿科",
    title: "护师",
    joinTime: "2022-08-23 21：00：00",
  },
  {
    id: 5,
    name: "医生5",
    tel: "18811112345",
    hospital: "华西医院",
    department: "儿科",
    title: "护师",
    joinTime: "2022-08-23 21：00：00",
  },
  {
    id: 6,
    name: "医生6",
    tel: "18811112345",
    hospital: "华西医院",
    department: "儿科",
    title: "护师",
    joinTime: "2022-08-23 21：00：00",
  },
  {
    id: 7,
    name: "医生7",
    tel: "18811112345",
    hospital: "华西医院",
    department: "儿科",
    title: "护师",
    joinTime: "2022-08-23 21：00：00",
  },
  {
    id: 8,
    name: "医生8",
    tel: "18811112345",
    hospital: "华西医院",
    department: "儿科",
    title: "护师",
    joinTime: "2022-08-23 21：00：00",
  },
  {
    id: 9,
    name: "医生9",
    tel: "18811112345",
    hospital: "华西医院",
    department: "内科",
    title: "住院医师",
    joinTime: "2022-08-23 21：00：00",
  },
  {
    id: 10,
    name: "医生10",
    tel: "18811112345",
    hospital: "华西医院",
    department: "内分泌科",
    title: "主任医师",
    joinTime: "2022-08-23 21：00：00",
  },
  {
    id: 12,
    name: "医生12",
    tel: "18811112345",
    hospital: "华西医院",
    department: "儿科",
    title: "护师",
    joinTime: "2022-08-23 21：00：00",
  },
  {
    id: 13,
    name: "医生13",
    tel: "18811112345",
    hospital: "华西医院",
    department: "儿科",
    title: "护师",
    joinTime: "2022-08-23 21：00：00",
  },
  {
    id: 14,
    name: "医生14",
    tel: "18811112345",
    hospital: "华西医院",
    department: "儿科",
    title: "护师",
    joinTime: "2022-08-23 21：00：00",
  },
  {
    id: 15,
    name: "医生15",
    tel: "18811112345",
    hospital: "华西医院",
    department: "消化科",
    title: "药剂师",
    joinTime: "2022-08-23 21：00：00",
  },
  {
    id: 16,
    name: "医生16",
    tel: "18811112345",
    hospital: "华西医院",
    department: "儿科",
    title: "护师",
    joinTime: "2022-08-23 21：00：00",
  },
  {
    id: 17,
    name: "医生17",
    tel: "18811112345",
    hospital: "华西医院",
    department: "儿科",
    title: "药剂师",
    joinTime: "2022-08-23 21：00：00",
  },
  {
    id: 18,
    name: "医生18",
    tel: "18811112345",
    hospital: "华西医院",
    department: "儿科",
    title: "护师",
    joinTime: "2022-08-23 21：00：00",
  },
  {
    id: 19,
    name: "医生19",
    tel: "18811112345",
    hospital: "华西医院",
    department: "儿科",
    title: "护师",
    joinTime: "2022-08-23 21：00：00",
  },
  {
    id: 20,
    name: "医生20",
    tel: "18811112345",
    hospital: "华西医院",
    department: "儿科",
    title: "护师",
    joinTime: "2022-08-23 21：00：00",
  },
  {
    id: 21,
    name: "医生21",
    tel: "18811112345",
    hospital: "华西医院",
    department: "儿科",
    title: "护师",
    joinTime: "2022-08-23 21：00：00",
  },
];
localStorage.setItem("data", JSON.stringify(data));

// 获取下拉信息
var oChoiceText1 = document.querySelector("#choiceText1");
var aLi1 = document.querySelectorAll("#choiceTextLi1 li");
var oChoiceText2 = document.querySelector("#choiceText2");
var aLi2 = document.querySelectorAll("#choiceTextLi2 li");
for (let i = 0; i < aLi1.length; i++) {
  aLi1[i].onclick = function () {
    oChoiceText1.innerHTML = this.innerHTML;
  };
}
for (let i = 0; i < aLi2.length; i++) {
  aLi2[i].onclick = function () {
    oChoiceText2.innerHTML = this.innerHTML;
  };
}

//当前的页码
var page = 1;
//每页的条数
var count = 8;
//获取tbody
var oTBody = document.querySelector("tbody");
//获取分页容器
var oPagination = document.querySelector(".pagination");
//获取上一页的按钮
var oPrevBtn = document.querySelector(".prev");
//获取下一页的按钮
var oNextBtn = document.querySelector(".next");
//获取搜索的输入框 #choiceText1 #choiceText2
var oSearchInp = document.querySelector(".searchInp");
var oSearchInp1 = document.querySelector("#choiceText1");
var oSearchInp2 = document.querySelector("#choiceText2");
//获取搜索按钮.choiceBtn
var oSearchBtn = document.querySelector(".choiceBtn");
//获取修改的保存
var oEditSaveBtn = document.querySelector(".editSaveBtn");
// 分页数据
var dataPage = document.querySelector(".batchChoice span");

//初始化
function render() {
  //查看搜索框的内容
  var str1 = oSearchInp.value;
  var str2 = oSearchInp1.innerHTML; //搜索的内容2
  var str3 = oSearchInp2.innerHTML; //搜索的内容3
  var searchData = []; //最终用来渲染的;
  var data1 = [];
  var data2 = [];
  if (str1.trim() == "") {
    data1 = data;
  } else {
    data1 = data.filter(function (v) {
      // if(v.name.includes(str1)){
      //     return v
      // }
      return v.name.includes(str1);
    });
  }

  if (str2 == "请选择科室") {
    data2 = data1;
  } else {
    data2 = data1.filter(function (v) {
      /*  if(v.user.includes(str2)){
              return v
          } */
      return v.department.includes(str2);
    });
  }

  if (str3 == "请选择职称") {
    searchData = data2;
  } else {
    searchData = data2.filter(function (v) {
      return v.title.includes(str3);
    });
  }

  //让table为空
  oTBody.innerHTML = "";
  //根据count和page准备要渲染的数据
  var renderArr = searchData.slice((page - 1) * count, page * count);
  //循环要渲染的数据
  for (var i = 0; i < renderArr.length; i++) {
    //创建tr
    var oTr = document.createElement("tr");
    //给tr创建内容
    /* 
    id: 10,
    name: "医生10",
    tel: "18811112345",
    hospital: "华西医院",
    department: "中科医",
    title: "中医科",
    joinTime: "2020-02-07 21：00：00",
     */
    oTr.innerHTML = `
    <td><input type="checkbox" name="" id="" /></td>
    <td>${renderArr[i].id}</td>
    <td>${renderArr[i].name}</td>
    <td>${renderArr[i].tel}</td>
    <td>${renderArr[i].hospital}</td>
    <td>${renderArr[i].department}</td>
    <td>${renderArr[i].title}</td>
    <td>${renderArr[i].joinTime}</td>
    <td>
        <button class="btn btn-primary edit">编辑</button>
        <button class="btn btn-danger del">删除</button>
    </td>
`;
    //把tr创建到tbody里面
    oTBody.appendChild(oTr);
  }
  //渲染页码
  //找到所有的1，2，3，4的页码
  var aPageBtn = document.querySelectorAll(".pageBtn");
  //删除所有的页码
  for (var i = 0; i < aPageBtn.length; i++) {
    oPagination.removeChild(aPageBtn[i].parentNode);
  }
  //根据数据的长度重新创建页码
  var L = Math.ceil(searchData.length / count);
  for (var i = 1; i <= L; i++) {
    //创建li
    var oLi = document.createElement("li");
    //给li创建内容
    oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
    //如果li和当前的页码一致，给他加一个选中的class
    if (i == page) {
      oLi.classList.add("active");
    }
    //在下一页的前面插入页码
    oPagination.insertBefore(oLi, oPagination.lastElementChild);

    // 显示数据条数
    dataPage.innerHTML = "共" + L + "页/" + (searchData.length + 1) + "条数据";
  }

  //联动全选
  var oChoiceAllInp = document.querySelector(".choiceAll input");
  var aChoiceAllInp = oTBody.querySelectorAll("input");
  var n = 0; //计数
  oChoiceAllInp.checked = false;

  oChoiceAllInp.addEventListener("click", choiceAllFn);

  function choiceAllFn() {
    if (oChoiceAllInp.checked == true) {
      for (var i = 0; i < aChoiceAllInp.length; i++) {
        aChoiceAllInp[i].checked = true;
      }
    } else {
      for (var i = 0; i < aChoiceAllInp.length; i++) {
        aChoiceAllInp[i].checked = false;
      }
      n = 0;
    }
  }

  for (var i = 0; i < aChoiceAllInp.length; i++) {
    aChoiceAllInp[i].onclick = function () {
      //判断当前选没选中
      if (this.checked == true) {
        n++;
      } else {
        n--;
      }

      if (n == aChoiceAllInp.length) {
        //全部都被选中
        oChoiceAllInp.checked = true;
      } else {
        oChoiceAllInp.checked = false;
      }
    };
  }
}
// 初始化渲染
render();

//给分页加事件
/* 
        每页是5条  count
        data  
    1   0-5
    2   5-10
    3   10-15
    n   (n-1)*count   n*count
-----------------------------
        data  每页是5条  count 
    
    1    1
    5    1
    6    2
    10   2
    11   3
    n    Math.ceil(n/count)
 */
oPagination.addEventListener("click", changePage);
function changePage() {
  //如果当前点击的按钮有pageBtn这个class名字
  if (event.target.className == "pageBtn") {
    //修改全局的page
    page = event.target.innerText;
    //渲染table，渲染分页
    render();
  }
}
//给上一页和下一页加事件
oPrevBtn.addEventListener("click", prev);
oNextBtn.addEventListener("click", next);
function prev() {
  if (page > 1) {
    page--;
    render();
  }
}
function next() {
  if (page < Math.ceil(data.length / count)) {
    page++;
    render();
  }
}
//搜索
oSearchBtn.addEventListener("click", searchFn);
function searchFn() {
  page = 1;
  render();
}
//删除功能
var delId; //重置的id
oTBody.addEventListener("click", openDel);
function openDel() {
  if (event.target.className.includes("del")) {
    $("#delModal").modal("show");
    delId = event.target.parentNode.parentNode.children[1].innerText;
  }
}
var delBtn = document.querySelector(".delBtn");
delBtn.addEventListener("click", delIt);
function delIt() {
  for (var i = 0; i < data.length; i++) {
    if (data[i].id == delId) {
      data.splice(i, 1);
    }
  }
  $("#delModal").modal("hide");
  //重新渲染
  render();
}

//给所有的编辑按钮加事件
oTBody.addEventListener("click", openEdit);
function openEdit() {
  //判断事件源
  if (event.target.className.includes("edit")) {
    //让编辑框显示
    $("#editModal").modal("show");
    //确认是那个id的数据
    var id = event.target.parentNode.parentNode.children[1].innerText;
    //循环数据，找到对应id的，给编辑框赋值
    for (var i = 0; i < data.length; i++) {
      if (data[i].id == id) {
        document.querySelector(".editId").value = data[i].id;

        document.querySelector(".editName").value = data[i].name;

        document.querySelector(".editTel").value = data[i].tel;

        document.querySelector(".editHospital").value = data[i].hospital;

        document.querySelector(".editDepartment").value = data[i].department;

        document.querySelector(".editTitle").value = data[i].title;

        document.querySelector(".editJoinTime").value = data[i].joinTime;
      }
    }
  }
}
//点击修改保存
oEditSaveBtn.addEventListener("click", editSave);
function editSave() {
  //看替换的是哪一条；
  var id = document.querySelector(".editId").value;
  //循环数据，找到对应的，更改
  for (var i = 0; i < data.length; i++) {
    if (data[i].id == id) {
      data[i].name = document.querySelector(".editName").value;
      data[i].tel = document.querySelector(".editTel").value;
      data[i].hospital = document.querySelector(".editHospital").value;
      data[i].department = document.querySelector(".editDepartment").value;
      data[i].title = document.querySelector(".editTitle").value;
      data[i].joinTime = document.querySelector(".editJoinTime").value;
    }
  }
  //关闭弹框
  $("#editModal").modal("hide");
  //重新渲染
  render();
}
// 批量删除功能
/*
    当点击了批量删除    
    将勾选了的 tr全部删除  遍历  将勾选了的input的tr另存在一个数组里
    并删除数据
 */
// 获取批量删除
var oBatchChoice = document.querySelector(".batchDelete");
var deleteArr = []; //存删除的tr
var checkId = []; //存被删除的 tr 的id
oBatchChoice.addEventListener("click", deleteAllFn);
function deleteAllFn() {
  aInp = document.querySelectorAll("tbody>tr>td>input");
  for (var i = 0; i < aInp.length; i++) {
    if (aInp[i].checked == true) {
      deleteArr.push(aInp[i]);
    }
  }
  console.log(deleteArr);
  for (var j = 0; j < deleteArr.length; j++) {
    // 找到每一项的id  存在数组里
    checkId.push(deleteArr[j].parentNode.parentNode.children[1].innerText);
  }
  console.log(checkId);
  // 根据id删除对应的数据 然后进行数据渲染
  for (var i = 0; i < checkId.length; i++) {
    for (var j = 0; j < data.length; j++) {
      if (checkId[i] == data[j].id) {
        //删除id所对应的数据
        data.splice(j, 1);
      }
    }
  }
  //重新渲染
  render();
  deleteArr = [];
  checkId = [];
}